﻿@{
    ViewBag.Title = "SalesValue";
}

<h2>Sales Value DashBoard</h2>

<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawlineChart);
    function drawlineChart() {
        $.post('/DashBoard/GetSalesValuePerPeriodDashBoard', {},
            function (data) {
                var tdata = new google.visualization.DataTable(data,0.5);

                var options = {
                    title: "Overall Sales Value",
                    legend: {position: 'right', textStyle: {color: 'blue', fontSize: 8}},
                    hAxis: { title: 'Period' },
                    vAxis: {title: 'Value', minValue: 0, baseline: 0},
                };
                var chart = new google.visualization.ColumnChart(document.getElementById('chart_Bargraph_SalesValuePerPeriod_div'));
                chart.draw(tdata, options);
            });
    }
</script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawlineChart);
    function drawlineChart() {
        $.post('/DashBoard/GetSalesValuePerAreaDashBoard', {},
            function (data) {
                var tdata = new google.visualization.DataTable(data,0.5);

                var options = {
                    title: "Top 5 Selling Area",
                    legend: {position: 'right', textStyle: {color: 'blue', fontSize: 8}},
                    hAxis: { title: 'Area' },
                    vAxis: {title: 'Value', minValue: 0, baseline: 0},
                    is3D:true
                };
                var chart = new google.visualization.PieChart(document.getElementById('chart_Bargraph_salevaluePerArea_div'));
                chart.draw(tdata, options);
            });
    }
</script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawlineChart);
    function drawlineChart() {
        $.post('/DashBoard/GetSalesValueAvgPerPeriodDashBoard', {},
            function (data) {
                var tdata = new google.visualization.DataTable(data,0.5);

                var options = {
                    title: " Average Sales per day vs Target",
                    legend: {position: 'right', textStyle: {color: 'blue', fontSize: 8}},
                    hAxis: { title: 'Period' },
                    vAxis: {title: 'Average', minValue: 0, baseline: 0},
                };
                var chart = new google.visualization.LineChart(document.getElementById('chart_line_salevalueAvgPerArea_div'));
                chart.draw(tdata, options);
            });
    }
</script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawlineChart);
    function drawlineChart() {
        $.post('/DashBoard/GetTopSellingFSRDashBoard', {},
            function (data) {
                var tdata = new google.visualization.DataTable(data,0.5);

                var options = {
                    title: "Top 5 Selling Salesman",
                    legend: {position: 'right', textStyle: {color: 'blue', fontSize: 8}},
                    is3D:true,
                };
                var chart = new google.visualization.PieChart(document.getElementById('chart_topsellingfsr_div'));
                chart.draw(tdata, options);
            });
    }
</script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawlineChart);
    function drawlineChart() {
        $.post('/DashBoard/GetBottomSellingFsrDashBoard', {},
            function (data) {
                var tdata = new google.visualization.DataTable(data,0.5);

                var options = {
                    title: "Bottom 5 Selling Salesman",
                    legend: {position: 'right', textStyle: {color: 'blue', fontSize: 8}},
                    is3D:true,
                };
                var chart = new google.visualization.PieChart(document.getElementById('chart_bottomsellingfsr_div'));
                chart.draw(tdata, options);
            });
    }
</script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawlineChart);
    function drawlineChart() {
        $.post('/DashBoard/GetBottomSalesValuePerAreaDashBoard', {},
            function (data) {
                var tdata = new google.visualization.DataTable(data,0.5);

                var options = {
                    title: "Bottom 5 Selling Area",
                    legend: {position: 'right', textStyle: {color: 'blue', fontSize: 8}},
                    hAxis: { title: 'Area' },
                    vAxis: {title: 'Value', minValue: 0, baseline: 0},
                };
                var chart = new google.visualization.PieChart(document.getElementById('chart_Bottom_salevaluePerArea_div'));
                chart.draw(tdata, options);
            });
    }
</script>
<table>
    <tr>
        <td>
            <div id="chart_line_salevalueAvgPerArea_div" style="width: 500px; height: 300px;">
            </div>
        </td>
        <td>
            <div id="chart_Bargraph_SalesValuePerPeriod_div" style="width: 500px; height: 300px;">
            </div>
        </td>
     
       
    </tr>
    
    <tr>
        <td >
            <div id="chart_Bargraph_salevaluePerArea_div" style="width: 500px; height: 300px;">
            </div>
        </td>
     
        <td>
            <div id="chart_topsellingfsr_div" style="width: 500px; height: 300px;">
            </div>
        </td>
    </tr>
    <tr>
        <td >
            <div id="chart_Bottom_salevaluePerArea_div" style="width: 500px; height: 300px;">
            </div>
        </td>
     
       <td>
            <div id="chart_bottomsellingfsr_div" style="width: 500px; height: 300px;">
            </div>
        </td>
    </tr>
</table>


